<template>
	<uni-popup ref="slider" type="bottom">
		<view class="slider-box flex_cc">
			<uni-icons type="closeempty" size="20" color="#8A8F99" class="close-icon" @click="close"></uni-icons>
			<view class="width-100">
				<slider :value="props.value || data.min" @change="changeNum" :min="data.min" :max="data.max" show-value
					active-color="#008965" background-color="#D8D8D8" />
				<view class="flex_sbc uni-mr-48">
					<view>{{ data.min }}</view>
					<view v-if="props.unit" class="z-font-24 uni-585C66"><text class="z-font-22">单位</text>({{ props.unit }})</view>
					<view>{{ data.max }}</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>
<script setup>
	import {
		ref,
		reactive
	} from "vue"
	const props = defineProps({
		value: [String, Number],
		startEnd: [String, Array],
		unit: String
	})
	const data = reactive({
		min: 0,
		max: 100
	})
	const slider = ref()

	function open() {
		if (props.startEnd) {
			const [min, max] = props.startEnd.split('-')
			data.max = max
			data.min = min
		}
		slider.value.open()
	}

	function close() {
		slider.value.close()
	}

	const emits = defineEmits(['change'])

	function changeNum(e) {
		emits('change', e.detail.value)
		setTimeout(() => {
			close()
		}, 100)
	}

	defineExpose({
		open,
		close
	})
</script>
<style scoped>
	:deep(uni-slider) {
		margin: 10px 16rpx 8rpx 18px;
	}

	:deep(.uni-slider-handle-wrapper) {
		height: 8rpx;
	}

	:deep(.uni-slider-thumb) {
		background: #008965 !important;
		border: 12rpx solid #FFFFFF;
		width: 16rpx !important;
		height: 16rpx !important;
		box-shadow: 0px 2px 8px 0px rgba(0, 29, 21, 0.27);
		margin-top: -20rpx !important;
	}

	.slider-box {
		width: 688rpx;
		min-height: 298rpx;
		background: #FFFFFF;
		border-radius: 24px;
		margin-left: 31rpx;
		margin-bottom: 50rpx;
		position: relative;
		box-sizing: border-box;
		padding: 0 16rpx;
	}

	.close-icon {
		position: absolute;
		right: 24rpx;
		top: 24rpx;
	}
</style>